<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02页面广告</title>
    <style>
        .top{
            background-color: lightgreen;
            color: green;
            font-size: 30px;
            height: 120px;
            position: fixed;
            width: 100%;
            top: 0;
        }
        p{
            margin-top: 130px;
        }
        .left,.right{
            width: 40px;
            height: 200px;
            position: fixed;
            top: 40%;
        }
        .left{
            background-color: #0aa1ed;
            left: 20px;
        }
        .right{
            background-color: yellow;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部广告</div>
<div class="left">我是左侧广告</div>
<div class="right">我是右侧广告</div>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut culpa cum doloribus earum exercitationem, fugit ipsa laudantium maxime placeat quos! Accusamus amet minus tenetur? Dolore eius excepturi in quae tempore!</span><span>Architecto deserunt ea eius hic in magnam quas quibusdam quisquam similique sint? Atque doloremque ducimus fuga illum molestiae nemo. Magnam, possimus, tenetur. Accusantium, architecto consequatur dignissimos laborum praesentium vitae voluptatem.</span><span>Autem enim eos nostrum, numquam pariatur vel voluptate! Cupiditate dolores illum neque quae quaerat? Accusamus accusantium dignissimos dolorem, enim non, nulla quas quod, ratione reiciendis sapiente sed tenetur ut voluptate!</span><span>Aliquid aut autem eius molestias pariatur quo, tenetur veniam? Ad dolorum esse facere, inventore iusto libero nobis non officia optio quisquam quos sequi totam voluptates. Fugit laborum rem reprehenderit soluta.</span><span>Ab ad aperiam, aut beatae, dolor eaque eligendi eos error explicabo id inventore itaque laborum laudantium natus necessitatibus odit perspiciatis placeat qui quis sed soluta velit voluptas voluptate. In, porro.</span><span>Animi consequatur cupiditate debitis dicta dolor dolore eos, excepturi facere fuga id iusto labore, minus modi neque placeat quae quasi reprehenderit repudiandae, sit soluta totam unde veniam veritatis vero voluptatibus.</span><span>Aliquam assumenda, consequatur cupiditate eligendi enim est eveniet excepturi explicabo illo ipsa molestias optio perferendis sequi vel voluptates. Aliquid consequatur corporis dolorem ea eum explicabo quasi? Esse maxime numquam quam.</span><span>Atque beatae delectus quos rerum soluta? Architecto atque aut, blanditiis dolore eveniet explicabo fugiat laborum mollitia non provident, recusandae reprehenderit sapiente similique ut velit! Asperiores error fugit omnis temporibus voluptate?</span><span>A alias architecto consequatur culpa cum dolores doloribus ea fuga iste molestias non numquam, repellat reprehenderit sapiente ullam! Ad at cumque dolorum nihil numquam perspiciatis quis sunt unde. Accusantium, tempore!</span><span>Corporis debitis deserunt explicabo harum magni maiores quae sequi veritatis. Ab assumenda aut, debitis eveniet incidunt labore laudantium nisi perferendis provident quisquam, quos tempora tempore temporibus ullam ut velit voluptate.</span><span>Beatae, consequatur cumque in labore necessitatibus sapiente sunt tempore voluptas. Asperiores atque consequatur delectus distinctio eius enim est inventore nam necessitatibus, odio officia pariatur quibusdam quidem quo tempora, vel voluptates.</span><span>Dignissimos explicabo in maiores non, placeat sapiente tempora? Ad amet assumenda at cum doloremque eos et ex facilis hic magnam maiores minus, nihil nisi numquam optio provident quis quod velit.</span><span>Animi architecto autem eius itaque molestiae quibusdam, quo quos reiciendis repellendus sit tempora voluptatibus? Ab aliquid cumque dolore ex maxime minima officia quam sequi similique sint tempora velit, voluptas voluptates?</span><span>Deleniti eligendi explicabo hic illum nobis ratione sed velit voluptate? Cumque reiciendis similique vero. Accusamus asperiores cum molestiae provident! Blanditiis commodi dolorem ex pariatur rem saepe soluta tempora unde velit.</span><span>A, alias animi aperiam atque, autem delectus est et explicabo fugit id, inventore ipsam iure magni neque numquam officia optio perferendis placeat provident quibusdam quisquam reiciendis sunt tempore ullam velit?</span><span>Exercitationem tenetur, veniam. Ab, autem corporis distinctio doloribus eos est ipsa quo vero. Blanditiis eligendi illo illum libero quae quidem quis repellendus sapiente soluta. Dicta eveniet neque officiis quam quas.</span><span>Consectetur distinctio doloremque est facere impedit, tempora vitae? Accusamus accusantium asperiores ducimus explicabo ipsam ipsum pariatur perferendis placeat quae vitae! Culpa earum in nulla officiis perspiciatis quisquam, quos. Pariatur, voluptas?</span><span>Ab, animi deserunt dolores eveniet id in itaque nemo officia rem voluptatibus! Architecto culpa ipsum minima numquam odio pariatur placeat qui, quis. Accusamus, eius mollitia natus quibusdam quidem similique tempore.</span><span>Animi cum dolores eius eveniet explicabo facilis, fuga fugiat, iusto nam nisi numquam quibusdam tempore, velit? Atque doloribus fugiat harum illo incidunt ipsam, minima nostrum qui quia sunt tenetur unde.</span><span>Consequatur labore maiores quo sapiente. Nostrum quasi rem sed. A accusamus amet atque commodi eaque esse in magnam modi obcaecati, officia omnis quibusdam quidem quos repellendus repudiandae tenetur voluptatem voluptatibus.</span><span>Accusamus cum, dignissimos iste quas quos rerum sequi vero. Alias aperiam aut explicabo hic illo ipsum minus neque nostrum odio, optio quae quaerat quam quas quisquam repellat tempore veniam voluptatibus?</span><span>Aut illum laborum nam nemo repudiandae. Accusantium, beatae consequatur corporis, cupiditate eaque eveniet exercitationem fuga nesciunt nostrum, pariatur quos saepe ut! Aliquid dolores inventore minima mollitia nesciunt reprehenderit sequi velit.</span><span>Ad animi, fugit in ipsam itaque quas recusandae sed. Alias deserunt libero nihil quos sed. Ad cumque eaque eos, eveniet facere illo illum ipsa, minima nulla optio pariatur praesentium qui?</span><span>Ad at commodi consequuntur culpa deleniti dicta explicabo facilis in magni nam, quaerat repellat sit? Aliquid aspernatur assumenda atque, autem commodi consequuntur dolorum eius eos expedita libero molestias quas quidem.</span><span>Maxime nulla quos voluptatibus. Debitis explicabo harum in nemo odit pariatur quasi tenetur. Asperiores atque autem culpa cumque doloremque exercitationem inventore ipsam iusto officiis recusandae, reprehenderit sed sit sunt tempora!</span><span>Ab consectetur illo provident quos unde! Accusantium aliquid animi blanditiis ducimus earum est facilis impedit ipsa, iure libero magnam natus nobis porro quaerat ratione similique suscipit tempora voluptatibus. Asperiores, molestias?</span><span>Adipisci consequatur incidunt inventore maxime praesentium quasi sit. Adipisci blanditiis deleniti dignissimos doloremque enim est, ex illum modi mollitia nihil odio quas quasi quod quos sapiente tenetur veniam vero, voluptatum.</span><span>Animi architecto beatae consectetur consequuntur corporis deserunt eveniet facere hic incidunt iste itaque laboriosam maiores minima modi natus nesciunt nisi numquam quod repellendus sapiente, sint, soluta tenetur ut veniam veritatis.</span><span>Alias blanditiis commodi, dolorem eius eos facere fugiat libero officiis pariatur quas quasi quis unde ut. Ab aperiam consequuntur fugiat iusto magni optio quidem tempore, voluptates? Itaque odio quas vero.</span><span>A aliquam assumenda dolor dolorum, explicabo ipsam itaque iusto labore neque, nesciunt nisi quia, velit. In ipsam molestiae molestias nihil omnis voluptatum! Dicta, nisi, sequi! Aspernatur dicta doloribus molestias voluptate?</span><span>Alias aut beatae consectetur consequuntur deserunt dolores eaque et eum id incidunt ipsa itaque iure laudantium maxime nemo, nihil nobis optio, perferendis quas quasi quisquam reprehenderit suscipit tenetur ut veritatis.</span><span>Cum dolores eligendi eum excepturi facilis quis ratione totam veniam voluptas voluptatibus. Culpa cum ipsam nulla quis sunt! Aliquam amet at dolor doloremque dolorum ducimus eum qui quis, tempore veritatis.</span><span>Adipisci alias, aperiam commodi consequuntur dolores doloribus ea nihil tenetur voluptates? Ab at debitis dolore enim harum magni nobis numquam perspiciatis porro possimus qui quos ratione, reiciendis repudiandae rerum sit!</span><span>Dolor id illum nihil recusandae voluptatibus. Aliquam commodi eligendi eveniet expedita fugit in ipsa iure maiores nihil non odit pariatur porro provident, quae quod ratione recusandae saepe sequi tempore totam!</span><span>Atque consequatur cumque, cupiditate delectus ducimus eligendi eos est, facilis fuga libero nisi non officia officiis placeat praesentium quaerat, quas rerum sequi unde vitae. Alias animi dolor esse incidunt quibusdam.</span><span>Consequuntur impedit iusto necessitatibus! Amet at atque autem corporis dolor doloremque error et facilis fugit ipsa itaque laborum, libero magnam maxime nihil optio praesentium quia recusandae tempora veritatis? Quos, veniam!</span><span>Ab amet assumenda atque autem distinctio dolor excepturi exercitationem explicabo harum illo laborum molestiae molestias neque nisi, nostrum praesentium quidem quisquam recusandae repellendus similique sunt ullam voluptas voluptate, voluptatem voluptates!</span><span>Beatae consequuntur dolore est ex iusto magni nesciunt, nostrum officiis possimus qui quis recusandae repellat sint suscipit, ullam, ut voluptates! A cum eos esse eveniet officia perspiciatis quis tempore ut.</span><span>Accusantium, aliquam aspernatur debitis dignissimos dolores enim esse ex fuga illum, ipsa iure magnam minima modi molestias, nemo officia possimus quam quas quia quibusdam quidem totam vero. Incidunt, sequi, voluptas!</span><span>Blanditiis distinctio dolorum et illo ipsam molestias sint tempore unde. A culpa cupiditate deserunt error eveniet incidunt labore, minus reiciendis saepe sint, veniam voluptas! Eveniet, itaque, quaerat? Ea, nobis quisquam.</span></p>
</body>
</html>